<script lang="ts" setup>
import BorderBox4 from '@/components/basic/BorderBox4.vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import nullBatteryImg from '@/assets/images/null-battery.png'
const router = useRouter()
interface Props {
  level?: string
  index: number
  voltage: string
  time: string
  boxCode: string
  empty: boolean
}
const props = withDefaults(defineProps<Props>(), {
  level: '0',
})

const levelCount = computed(() => {
  // 计算格数，小数部分也要保留
  return (+props.level / 100) * 5
})
const placement = computed(() => (props.index > 5 ? 'right' : 'left'))
const arrowRef = ref(null) // 引用自定义箭头元素
const popperOptions = computed(() => {
  return {
    modifiers: [
      { name: 'arrow', options: { element: arrowRef.value } },
      { name: 'offset', options: { offset: [0, 70] } },
    ],
  }
})
const handleClick = () => {
  router.push({
    name: 'BatteryInfo',
    query: {
      produceId: props.boxCode,
      infoType: 'BatteryCode',
      type: '3',
    },
  })
}
const batteryColor = computed(() => {
  return +props.level <= 20
    ? '#FF4545'
    : +props.level <= 40
      ? '#FF8345'
      : 'rgba(100, 255, 180, 0.80)'
})
</script>

<template>
  <el-popover
    :placement="placement"
    width="250px"
    trigger="hover"
    popper-class="battery-info-popover"
    :popper-options="popperOptions"
    :show-arrow="false"
  >
    <template #default>
      <border-box4 class="battery-info-popover-content">
        <span>
          更新时间: <span ml-0>{{ time }}</span>
        </span>
        <span>
          电池编号: <span ml-20>{{ boxCode }}</span>
        </span>
        <div flex items-center>
          <span> 当前电量:</span>
          <div rounded-5 p-5 :style="{ background: batteryColor }" ml-20>{{ level }}%</div>
        </div>
        <span>
          当前电压: <span ml-20>{{ voltage }}</span>
        </span>
        <div flex items-center justify-center w-full>
          <button
            cursor-pointer
            @click="handleClick"
            class="battery-swap-info-button"
            :disabled="boxCode.length > 6 || boxCode === '未知'"
            v-if="!empty"
          >
            查看详情
          </button>
        </div>
      </border-box4>
      <div
        ref="arrowRef"
        class="battery-info-popover-arrow"
        :class="{ left: placement === 'left', right: placement === 'right' }"
      >
        <div />
        <div />
      </div>
    </template>
    <template #reference>
      <div
        border-white
        border-solid
        border-r-1
        border-b-1
        border-l-1
        border-0
        w-full
        h-full
        flex
        flex-col
        items-center
        justify-center
        position-relative
      >
        <div class="battery" flex items-center justify-center>
          <div class="battery-body">
            <div
              class="battery-level"
              v-for="(item, index) in Math.floor(levelCount)"
              :key="'full-' + index"
            />
            <div
              v-if="levelCount % 1 !== 0"
              class="battery-level partial-level"
              :style="{ width: (levelCount % 1) * 20 + '%' }"
            />
          </div>
          <div class="battery-head" />
          <div class="no-battery" v-if="empty">
            <span mb-17>空仓</span>
            <img :src="nullBatteryImg" />
          </div>
        </div>
        <span class="text-[16px] mt-10">电池编号:{{ boxCode === '空仓' ? '' : boxCode }}</span>
      </div>
    </template>
  </el-popover>
</template>

<style lang="scss" scoped>
.battery {
  position: relative;
  width: 80%;
  height: 70%;
  .battery-body {
    width: 100%;
    height: 100%;
    background: rgba(69, 170, 255, 0.4);
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    z-index: 10;
    .battery-level {
      height: 100%;
      background: rgba(100, 255, 180, 0.6);
      width: 20%;
      border-radius: 5px;
      z-index: 10;
      transition: all 0.5s;
    }

    .battery-level + .battery-level {
      margin-left: 10px;
    }

    /* 用来表示部分格子的样式 */
    .partial-level {
      background: rgba(100, 255, 180, 0.6);
      border-radius: 5px;
      margin-left: 10px;
      transition: all 0.5s;
    }
  }

  .battery-head {
    width: 15px;
    height: 30%;
    background: #fff;
    border-radius: 0px 4px 4px 0px;
  }
  .no-battery {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.battery-popover-warpper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(96, 207, 255, 0.8);
  z-index: 11;
}
.battery-swap-info-button {
  width: 96px;
  height: 32px;
  background: linear-gradient(180deg, #01e5fe 0%, #3c6dff 100%);
  font-size: 16px;
  color: #ffffff;
  outline: none;
  border: none;
}
.battery-swap-info-button:disabled {
  background: linear-gradient(180deg, #114377 0%, #0c2641 100%);
  cursor: not-allowed;
}
.battery-info-popover-content {
  background: rgba(69, 170, 255);
}
</style>
